<template>
  <el-dialog :visible="visible" custom-class="dialog-preview" :before-close="handleClose" size="full">
    <el-carousel :initial-index="index" :autoplay="false" ref="carousel">
      <el-carousel-item v-for="(item, index) in list" :key="index">
        <button type="button" class="dialog-preview-image">
          <img :src="item"/>
        </button>
      </el-carousel-item>
    </el-carousel>
  </el-dialog>
</template>

<script>
  export default {
    componentName: 'EPreview',
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      list: {
        type: Array,
        default () {
          return []
        }
      },
      index: {
        type: Number,
        default: 0
      }
    },
    watch: {
      visible (value) {
        if (!value) {
          this.$destroy()
        }
      }
    },
    destroyed () {
      this.$el.parentNode && this.$el.parentNode.removeChild(this.$el)
    },
    methods: {
      handleClose () {
        this.$emit('close')
      }
    }
  }
</script>
